<!-- eslint-disable vue/max-attributes-per-line -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => {
        searchData = {};
      }
        " searchConditionNum="6">
        <!-- <a-form-item label="" class="table-search-item">
          <GzDateRangePicker
            ref="dateRangePicker"
            v-model:value="searchData['queryDateRange']"
            customDateRangeType="date"
          />
        </a-form-item> -->
        <gz-text-up v-model:value="searchData['mchNo']" :placeholder="'商户号'" />
        <gz-text-up v-model:value="searchData['agentNo']" :placeholder="'网点机构号'" />
        <gz-text-up v-model:value="searchData['mchName']" :placeholder="'商户名称'" />
        <gz-text-up v-model:value="searchData['ifName']" :placeholder="'当前通道'" />
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable ref="infoTable" :init-data="true" :req-table-data-func="reqTableDataFunc" :table-columns="tableColumns"
        :search-data="searchData" row-key="mchNo" @btnLoadClose="btnLoading = false">
        <template #topBtnSlot>
          <div style="
              display: flex;
              gap: 10px;
              align-items: center;
              margin-bottom: 10px;
            ">
            <GzUploadExe v-if="$access('ENT_MCH_INFO_IMPT_MCH')" :isTrue="true" :showUploadList="false">
              <a-button type="primary" @click="toLeadInto" style="margin: 0">
                <plus-outlined />导入商户
              </a-button>
            </GzUploadExe>
            <a-button v-if="$access('ENT_MCH_INFO_DOWN_TEMPLATE')" type="link" href="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/211885cf-c22e-476f-9586-0dd9bdcce079.xlsx" style="margin: 0;">
              下载导入商户模板
            </a-button>
            <a-button v-if="$access('ENT_MCH_INFO_DOWN_TEMPLATE')" type="link" href="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b95bd22f-a03e-4e45-8553-fef8f64ccc18.xlsx" style="margin: 0;">
              下载导入商户经典模板
            </a-button>
            <!-- <a-button type="primary" @click="toLeadInto" style="margin: 0">
              <EyeOutlined />查看错误
            </a-button> -->
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'orgName'">
            <span>{{ record.cityName || '' }}/{{ record.areaNameNew || '' }}/{{ record.orgName || '' }}</span>
          </template>

          <template v-if="column.key === 'orgCode'">
            <span>{{ record.agentNo4 }}</span>
          </template>

          <template v-if="column.key === 'mchName' && $access('ENT_MCH_INFO_VIEW')">
            <a @click="detailFunc(record.mchNo)"><b>{{ record.mchName }}</b></a>
          </template>

          <template v-if="column.key == 'mchListImage'">
            <a-image v-if="record.mchListImage" :src="record.mchListImage" style="width: 80px;"/>
            <img v-else src="@/assets/svg/default-img.svg" style="width: 80px;"/>
          </template>

          <template v-if="column.key === 'orderSort'">
            {{ record.orderSort === 1 ? '是' : '否' }}
          </template>

          <template v-if="column.key === 'ossRecordId'">
            <a-badge :text="record.ossRecordId ? '老商户' : '新商户'" />
          </template>

          <template v-if="column.key === 'state'">
            <a-badge :status="record.state === 0 ? 'error' : 'processing'" :text="record.state === 0 ? '禁用' : '启用'" />
          </template>

          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <GzUploadExe v-if="$access('ENT_MCH_INFO_IMG')" :showUploadList="false" :isNeedImport="false" :accept="'.jpg,.png,.jpeg,.gif,.JPG,.PNG,.JPEG,.GIF'" @sendData="(src) => uploadMchImg(src, record.mchNo)">
                <template #uploadBtn>
                  <a-button type="link">{{ record.mchListImage? '更新图片' : '新增图片' }}</a-button>
                </template>
              </GzUploadExe>
              <a-button v-if="$access('ENT_MCH_INFO_ORDER')" type="link" :danger="record.orderSort === 1" @click="toTopHandle(record)">{{ record.orderSort === 1 ? '取消置顶' : '精选置顶' }}</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { API_URL_MCH_LIST, req, API_URL_MCH_IMAGE_UPDATE, API_URL_MCH_TOP } from "@/api/manage";
import InfoDetail from "./Detail.vue";
import { ref, reactive, getCurrentInstance } from "vue";

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties;

const infoDetail = ref();
const infoTable = ref();
let tableColumns = reactive([
  { key: 'orgName', title: '商户归属', dataIndex: 'orgName', width: 350, minWidth: 350, maxWidth: 350, fixed: 'left' },
  // { key: 'cityName', title: '市', dataIndex: 'cityName', width: 100, minWidth: 100, maxWidth: 250, fixed: 'left' },
  // { key: 'areaNameNew', title: '区县', dataIndex: 'areaNameNew', width: 200, minWidth: 200, maxWidth: 250 },
  // { key: 'orgName', title: '网点', dataIndex: 'orgName', width: 200, minWidth: 200, maxWidth: 250 },
  { key: 'orgCode', title: '网点号', dataIndex: 'orgCode', width: 100, minWidth: 100, maxWidth: 170 },
  // { key: 'loginUsername', title: '登录账户', dataIndex: 'loginUsername',width: 120, minWidth: 100, maxWidth: 150},
  { key: "mchNo", title: "商户号", dataIndex: "mchNo", width: 150, minWidth: 150, maxWidth: 200, },
  { key: "mchName", title: "商户名称", dataIndex: "mchName", width: 250, minWidth: 250, maxWidth: 300, },
  { key: "mchListImage", title: "商户图片", dataIndex: "mchListImage", width: 120, minWidth: 120, maxWidth: 120, },
  { key: "phone", title: "预留手机号", dataIndex: "phone", width: 150, minWidth: 150, maxWidth: 200, },
  { key: "orderSort", title: "是否置顶", dataIndex: "orderSort", width: 120, minWidth: 120, maxWidth: 200, },
  // { key: 'contactTel', title: '手机号', dataIndex: 'contactTel', width: 140, minWidth: 140, maxWidth: 170 },
  // { key: "ifName", title: "当前通道", dataIndex: "ifName", width: 150, minWidth: 150, maxWidth: 250, },
  // { key: "aliSubmerchantNo", title: "支付宝间连号", dataIndex: "aliSubmerchantNo", width: 180, minWidth: 180, maxWidth: 250, },
  // { key: "wechatSubmerchantNo", title: "微信间连号", dataIndex: "wechatSubmerchantNo", width: 120, minWidth: 120, maxWidth: 250 },
  { key: 'state', title: '状态', dataIndex: 'state', width: 80, minWidth: 80, maxWidth: 150 },
  { key: 'ossRecordId', title: '新老用户', dataIndex: 'ossRecordId', width: 100, minWidth: 100, maxWidth: 150 },
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt', width: 160, minWidth: 200, maxWidth: 230 },
  { key: 'operation', title: '操作', width: 260, fixed: 'right', align: 'center' }
])

let btnLoading = ref(false);
let searchData = ref({});

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return req.list(API_URL_MCH_LIST, params);
}
function searchFunc() {
  // 点击【查询】按钮点击事件
  infoTable.value.refTable(true);
}

function detailFunc(recordId: any) {
  // 商户详情页
  infoDetail.value.show(recordId);
}

/**
 * 商户图片修改
 */
const uploadMchImg = async (imageUrl,mchNo) => {
  await req.add(API_URL_MCH_IMAGE_UPDATE, { imageUrl, mchNo })
  infoTable.value.refTable()
  $infoBox.message.success('商户图片修改成功！')
}
/**
 * 精选商户置顶
 */
const toTop = async (mchNo, order, flag) => {
  await req.add(API_URL_MCH_TOP, { mchNo, order })
  infoTable.value.refTable(true)
  $infoBox.message.success(flag ? '商户置顶成功！' : '商户取消置顶！')
}

/**
 * 置顶提示
 */
const toTopHandle = (record) => {
  const { mchNo, orderSort } = record
  if(orderSort === 1){  // 已置顶 去取消置顶
    $infoBox.confirm('确认取消置顶？', '请确认是否取消置顶当前商户？', () => {
      toTop(mchNo, 0, false)
    })
  }else{  // 未置顶 去置顶
    $infoBox.confirm('确认置顶？', '请确认是否置顶当前商户？', () => {
      toTop(mchNo, 1, true)
    })
  }
}

// 导入商户
function toLeadInto() {
  // 、、
}
</script>
